<template>
	<!-- 来水 -->
	<view>
		<view class="item_detail_box box_shadow" :style="!isUp ? hide : show">
			<pull-up :isUp.sync="isUp"></pull-up>
			<view style="display: flex; justify-content: space-between;">
				<div @click="showArea = true" class="areaDiv">{{value}}</div>
				<div>18：00</div>
			</view>
			<u-select v-model="showArea" :list="area" @confirm="confirm"></u-select>
			<ul class="numBox">
				<li>超警戒：{{totalAlert}}个</li>
			</ul>
			<scroll-view class="content" :scroll-y="isUp" :scroll-top="scrollTop" @scroll='handleScroll'>
				<u-table v-show="isUp">
					<u-tr>
						<u-th>入流河口</u-th>
						<u-th>预测流量 (m³/s)</u-th>
					</u-tr>
					<u-tr v-for="item in tableList">
						<u-td>{{item.properties.name}}</u-td>
						<u-td>{{Number(item.properties.value).toFixed(2)}}</u-td>
					</u-tr>
				</u-table>
			</scroll-view>
		</view>
		<u-popup class="popupBox" v-model="showPopup" mode="bottom" length="370rpx" :mask="false" :mask-close-able="false" :closeable="true">
			<view class="popupDetail">
				<h2>{{popupDetail.name}}</h2>
				<ul>
					<li>
						<label>预测时间:</label><span>{{popupDetail.time}}</span>
					</li>
					<li>
						<label>预测流量:</label><span>{{Number(popupDetail.value).toFixed(2)}}(m³/s)</span>
					</li>				
				</ul>
				<a class="viewDetail" @click="goDetail">详情</a>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {Et} from "../../../assets/js/Oak.js";
	export default {
		data() {
			return {
				isUp: false, //默认收起状态
				show: "height: 800rpx;",
				hide: "height: 240rpx;",
				scrollTop: 0,
				showArea: false,
				value: '天府区', //下拉默认值
				area: [{
						value: '1',
						label: '天府区'
					},
					{
						value: '2',
						label: '天府区1'
					}
				],
				totalAlert: 2, //超警戒
				totalGuarantee: 4, //超保证
				tableList: [],
				showPopup:false,
				popupDetail:[]
			}
		},

		mounted() {
			var vm = this;
			Et.Manager.register("pointChange",(data,type)=>{
				console.log(data)
				console.log(type)
				if(type=='MONITOR_SW'){
					vm.popupDetail = data
				}
				setTimeout(function(){
					vm.showPopup = true
				},10)
					
			})
		},
		watch: {
			isUp(newVal) {
				if (!newVal) {
					this.scrollTop = Math.random();
				}
			}
		},
		created() {
			this.Request()
		},
		methods: {
			goDetail(){
				uni.navigateTo({
				    url: '/pages/monitor/waterCurve?code='+this.popupDetail.code+'&name='+this.popupDetail.name
				});
			},
			handleScroll(e) {
				if (e.detail.scrollTop < -150) {
					this.isUp = false
				}
			},
			confirm(e) {
				console.log(e);
				this.value = e[0].label
			},
			Request() {
				this.$api.reqApi.monitorSw().then(res => {
					this.tableList = res.features
					// this.totalAlert = res.meta.statis.alertLevel
					this.$emit('mapList',res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		overflow: hidden;
		text-overflow: ellipsis; //超出部分以省略号显示
		white-space: nowrap;
	}

	scroll-view {
		height: calc(100% - 160rpx);
	}
</style>
